<template>
  <div class="discuess-container" v-if="examStore.currQuestion.showAnswer">
    <shadowHeader
      :title="`考友讨论-${editorStore.list[4].length}条考友讨论`"
      :current="4"
      :rightLable="'我也要提供解析'"
    ></shadowHeader>
    <div class="item" v-for="(ana, index) in editorStore.list[4]">
      <div class="axam-ti-user">
        <span class="userName">考友 {{ ana.username }}</span
        >&emsp;
        <span class="time">更新于 {{ formatDate(ana.create_time) }}</span>
      </div>
      <div class="-content" v-html="changeHTML(mathHTMLToShow(ana.content))"></div>
    </div>

    <el-divider />
    <shadowHeader
      :title="`${editorStore.list[5].length}条评论`"
      :current="5"
      :rightLable="'参与讨论'"
      :hide="false"
    ></shadowHeader>
    <discussBox :current="5"> </discussBox>
  </div>
</template>
<script setup>
import shadowHeader from "@/components/shadowHeader.vue";
import { formatDate } from "@/utils/index.js";
import discussBox from "./discussBox.vue";
import { useExam } from "@/stores/exam.js";
const examStore = useExam();
import { userEditorStore } from "@/stores/editor.js";
const editorStore = userEditorStore();

watch(
  () => examStore.currQuestion.id,
  () => {
    editorStore.getCommentListFn(4);
  },
  { immediate: true }
);

const contents = ref(
  `<p>题干：直接细节题：正确答案为(E)。根据题干关键词whig propaganda在第二段定位。原文通过gathered， reminded， and conferred的平行并列结构说明了出席whig党集会的女性可以为whig带来什么，而(E)项正是conferred部分的同义改写。</p>`
);
const commitList = ref([
  {
    id: 1,
    username: "张XX",
    time: "2024-06-23 16:45",
    action: "提问",
    content: `<p>根据题干关键词whig propaganda在第二段定位。原文通过gathered， reminded， and conferred的平行并列结构说明了出席whig党集会的女性可以为whig带来什么，而(E)项正是conferred部分的同义改写。</p>`,
    replies: [
      {
        id: 2,
        username: "李XX",
        time: "2024-06-23 16:45",
        action: "回复",
        content: `<p>根据题干关键词whig propaganda在第二段定位。原文通过gathered， reminded， and conferred的平行并列结构说明了出席whig党集会的女性可以为whig带来什么，而(E)项正是conferred部分的同义改写。</p>`,
      },
      {
        id: 2,
        username: "李XX",
        time: "2024-06-23 16:45",
        action: "追问",
        content: `<p>根据题干关键词whig propaganda在第二段定位。原文通过gathered， reminded， and conferred的平行并列结构说明了出席whig党集会的女性可以为whig带来什么，而(E)项正是conferred部分的同义改写。</p>`,
      },
    ],
    hasMore: true,
  },
]);
const props = defineProps({
  current: {
    type: String,
    default: "",
  },
});
</script>
<style lang="scss" scoped>
.discuess-container {
  padding: 20px;

  border-radius: 8px 0px 0px 0px;
  background-color: #fff;
  margin-bottom: 30px;

  .item:not(:first-child) {
    margin-top: 20px;
  }

  .axam-ti-user {
    color: #333;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    padding-bottom: 10px;
  }
}
</style>
